<template>
	<view class="recharge" :key="refreshKey">
		<view class="recharge-content">
			<view class="cell" >
				<view class="cell-title">充值网络</view>
				<view class="cell-content">
				<uv-input  placeholder="请输入您的充值网络" class="recharge-input"  placeholderStyle="#5E636E" v-model="chainType" >
				</uv-input>
				</view>
			</view>
			<view class="cell" >
				<view class="cell-title">充值地址</view>
				<view class="cell-content">
				<uv-input  placeholder="请输入您的充值地址" class="recharge-input" placeholderStyle="#5E636E" v-model="address" readonly>
				<!-- <template v-slot:suffix>
					<view @click="copyData(selectedRechargeChannel.walletAddress)"> 复制地址</view>
				</template> -->
			   </uv-input>
				</view>
			</view>
			
		</view>
		<view class="recharge-tip">
			    <view style="font-size: 28rpx;">充值须知：</view>
				<view>1、在充值前，请确认您已注册并登录本平台账号，且账号已完成必要的实名认证等相关安全设置，以保障您的资产安全和充值操作的合规性。</view>
				<view>2、USDT的转账会收取网络手续费，具体数额视网络情况而定。用户应提前了解并准备好足够的能量或者TRX以覆盖这些费用‌。</view>
				<view>3、正常情况下，在您成功发起 USDT 充值后，系统将自动进行处理，一般会在 1 - 3 分钟内自动到账至您的平台账户中，如在三分钟后未到账，请及时咨询在线客服。</view>
				<view>4、您可以在平台的 “我的”-“充值记录” 板块中查看充值 USDT 的详细交易记录，包括发起时间、交易订单号、当前状态等信息。</view>
		</view>
		<view class="pay-next-btn">
			<!-- <uv-button shape="circle"  type="warning" size="large" @click="rechargeNext" :disabled="!allowRechargeFlag">确认充值
			</uv-button>	 -->
			<button class="pay-btn" @click="copyData(address)">点击复制</button> 
		</view>


		<!-- <view>
			<uv-form class="padding-lr32" label-position="top" label-width="150">
				<uv-form-item label="充值方式">
					<uv-radio-group @change="rechargeChannelChange" placement="column">
						<uv-radio :customStyle="{margin: '8px'}" v-for="(rechargeChannel, index) in rechargeChannels"
							:name="rechargeChannel.id">
							{{ formatRechargeInfo(rechargeChannel)  }}
						</uv-radio>
					</uv-radio-group>
				</uv-form-item>
				<uv-form-item label="充值金额">
					<uv-input :placeholder="rechargePlaceholder()" v-model="amount" type="number"
						:clearable="false"></uv-input>
				</uv-form-item>
			</uv-form>
			<view class="fixed-button-group">
				<view class="fixed-button-group-inner">
					<view class="recharge-tip">
						<view>选择充值通道，输入充值金额</view>
						<view>点击下一步获取充值信息</view>
						<view>根据充值信息转账后上传付款凭证</view>
					</view>
					<uv-button type="primary" size="large" @click="rechargeNext" :disabled="!allowRechargeFlag">下一步
					</uv-button>
				</view>
			</view>
		</view> -->
		<!-- <view v-show="currentStep == '2'">
			<view class="form-info">
				<view class="order-info">
					<view class="form-item">
						<view class="form-item-label">充值金额</view>
						<view class="form-item-content">{{amount}}
							{{selectedRechargeChannel.rechargeWay == '2' ? 'USDT' : ''}}</view>
					</view>
					<view class="form-item" v-show="selectedRechargeChannel.rechargeWay == '1'">
						<view class="form-item-label">持卡人姓名</view>
						<view class="form-item-content">
							{{selectedRechargeChannel.bankCardHolder}}
							<text class="click-copy"
								@click="copyData(selectedRechargeChannel.bankCardHolder)">点击复制</text>
						</view>
					</view>
					<view class="form-item" v-show="selectedRechargeChannel.rechargeWay == '1'">
						<view class="form-item-label">开户银行</view>
						<view class="form-item-content">{{selectedRechargeChannel.bankName}}</view>
					</view>
					<view class="form-item" v-show="selectedRechargeChannel.rechargeWay == '1'">
						<view class="form-item-label">卡号</view>
						<view class="form-item-content">{{selectedRechargeChannel.cardNumber}}
							<text class="click-copy" @click="copyData(selectedRechargeChannel.cardNumber)">点击复制</text>
						</view>
					</view>
					<view class="form-item" v-show="selectedRechargeChannel.rechargeWay == '2'">
						<view class="form-item-label">充币网络</view>
						<view class="form-item-content">{{selectedRechargeChannel.chainType}}</view>
					</view>
				</view>
			</view>
			<view v-show="selectedRechargeChannel.rechargeWay == '2'">
				<view class="qrcode-content" v-if="selectedRechargeChannel.walletAddress">
					<uv-qrcode ref="qrcode" size="320rpx" :value="selectedRechargeChannel.walletAddress"
						:options="{  margin: 10 }"></uv-qrcode>
				</view>
				<view class="wallet-address-content">
					<view class="wallet-address-content-txt">钱包地址<text class="wallet-address-content-btn"
							@click="copyData(selectedRechargeChannel.walletAddress)">点击复制</text></view>
					<view class="wallet-address-content-val">{{selectedRechargeChannel.walletAddress}}</view>
				</view>
			</view>
			<view>
				<uv-row>
					<uv-col span="9" offset="3">
						<uv-upload width="160" height="160" max-count="1" uploadText="选择付款截图" :fileList="fileList"
							@afterRead="uploadImg" @delete="deleteImg">
						</uv-upload>
					</uv-col>
				</uv-row>
			</view>
			<view class="fixed-button-group">
				<view class="fixed-button-group-inner">
					<uv-button type="primary" size="large" @click="recharge">确定充值
					</uv-button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import common from '@/common/common'
	import config from '@/common/config'
	export default {
		data() {
			return {
				rechargeSetting: '',
				currentStep: '2',
				rechargeChannels: [],
				selectedRechargeChannel: '',
				amount: '',
				fileList: [],
				paymentCertificate: '',
				allowRechargeFlag: false,
				address:'',
				chainType:'TRC-20',
				refreshKey:0
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '../rechargeRecord/rechargeRecord'
			});
		},
		onLoad(option) {
			this.getMemberRechargeSetting();
			this.findRechargeChannel();
			this.getMemberInfo()
		},
		onShow() {
			this.refreshKey += 1;
		},
		onUnload() {},
		onHide() {},
		methods: {

			formatRechargeInfo(record) {
				if (record.rechargeWay == '1') {
					return '银行卡 ' + record.bankName + ' ' + record.bankCardHolder;
				}
				return 'USDT ' + record.chainType + ' ' + record.walletAddress;
			},

			rechargePlaceholder() {
				if (this.rechargeSetting) {
					return '最小充值金额为' + this.rechargeSetting.rechargeMinAmount;
				}
			},

			getMemberRechargeSetting() {
				var that = this;
				uni.$uv.http.get('/setting/getMemberRechargeSetting').then(res => {
					that.rechargeSetting = res.data;
					that.allowRechargeFlag = that.rechargeSetting.allowRechargeFlag;
					if (!that.allowRechargeFlag) {
						uni.showToast({
							title: "充值时间在" + that.rechargeSetting.rechargeTimeStart + "到" + that
								.rechargeSetting.rechargeTimeEnd,
							icon: "none"
						});
						return;
					}
				});
			},

			recharge() {
				var that = this;
				if (that.paymentCertificate === null || that.paymentCertificate === "") {
					uni.showToast({
						title: "请上传付款截图",
						icon: "none"
					});
					return;
				}
				console.log(that.paymentCertificate);
				uni.$uv.http.post('/memberRecharge/recharge', {
					rechargeChannelId: that.selectedRechargeChannel.id,
					amount: that.amount,
					paymentCertificate: that.paymentCertificate,
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '操作成功!',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						}
					});
				});
			},

			rechargeChannelChange(id) {
				this.selectedRechargeChannel = id
			},

			rechargeNext() {
				var that = this;
				if (that.rechargeSetting === null || that.rechargeSetting === '') {
					return;
				}
				if (that.selectedRechargeChannel === null || that.selectedRechargeChannel === "") {
					uni.showToast({
						title: "请选择充值通道",
						icon: "none"
					});
					return;
				}
				if (that.amount === null || that.amount === "") {
					uni.showToast({
						title: "请输入充值金额",
						icon: "none"
					});
					return;
				}
				if (that.amount <= 0) {
					uni.showToast({
						title: "请输入正确的充值金额",
						icon: "none"
					});
					return;
				}
				if (that.amount < that.rechargeSetting.rechargeMinAmount) {
					uni.showToast({
						title: that.rechargePlaceholder(),
						icon: "none"
					});
					return;
				}
				that.currentStep = '2';
			},

			deleteImg() {
				this.paymentCertificate = '';
				this.fileList = [];
			},

			uploadImg(event) {
				var that = this;
				that.fileList.push({
					url: event.file.url,
					status: 'uploading',
					message: '上传中'
				});
				uni.$uv.http.upload(config.storageUploadUrl, {
					filePath: event.file.url,
					name: 'file_data',
				}).then(res => {
					that.paymentCertificate = res.data[0];
					that.fileList.splice(0, 1, {
						url: event.file.url,
						status: 'success',
						message: ''
					});
				});
			},

			copyData(data) {
				common.copyData(data);
			},
			get_add(id) {
				uni.$uv.http.post('/memberRecharge/queryPayment', {
					id: id
				}).then(res => {
					if(res.msg == 'success'){
						this.address = res.data
					}
					
				});
			},
			getMemberInfo() {
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					this.get_add(res.data.userName)
				});
			},
			findRechargeChannel() {
				var that = this;
				uni.$uv.http.get('/memberRecharge/findRechargeChannel', {}).then(res => {
					that.rechargeChannels = res.data;
				});
			},
		}
	}
</script>

<style scoped lang="less">
   page {
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #FFFFFF;
		font-size: 28rpx;
	}
	.recharge{
		padding: 20rpx 32rpx;
		.recharge-content{
   			background: #FFF;
			border-radius: 28rpx;
			padding: 28rpx 32rpx;
		}
		.cell{
			margin-bottom: 40rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.cell-title{
				color: #5D6777;
			    font-size: 24rpx;
				line-height: 24rpx;
				margin-bottom: 16rpx;
			}
			.cell-content{
			   .recharge-input{
				    height: 92rpx;
					border: none;
					background: #F5F7FB;
					border-radius: 20rpx;
					color: hsl(32, 60%, 74%);
					/deep/ .uni-input-input{
						color: #000;
					}
				}


			}
		}

		.recharge-tip{
			color: #545967;
			padding-top: 100rpx;
			font-size: 24rpx;
			line-height: 34rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			view{
				margin-bottom: 40rpx;
			}
		}
	}


	.pay-next-btn {
		padding: 0px 40rpx;
		position: fixed;
		bottom: 60rpx;
		left: 0;
		right: 0;
        .pay-btn{
			color: #0B1327;
			font-weight: 900;
			font-size: 28rpx;
			height: 100rpx;
			line-height:100rpx;
			background: #FEE19E;
		    border-radius: 50rpx;
		}
			
	}


	
</style>